import type { FC } from 'react';
import style from './index.less';
import { getArticle, getOnePagePv } from './service';
import React, { Fragment, useState, useEffect } from 'react';
import { Popover, Avatar, Tag } from 'antd';
import { GithubOutlined } from '@ant-design/icons';
import Count from '../Count';
import { Link, useHistory } from 'umi';
import IconFont from '@/components/Icon';
import ArticleCount from './count';
interface Props {}
const Article: FC<Props> = () => {
  const [acticles, setArticles] = useState([]);
  const history = useHistory();

  const user_id = localStorage.getItem('user_id');
  useEffect(() => {
    // 文章
    getArticle({ user_id, publish: 1, check: 1 }).then(res => {
      const { data } = res;
      setArticles(data);
    });
  }, []);
  const userContent = (
    <div>
      <div>
        <Avatar
          src={
            'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/blur,r_50,s_50/quality,q_1/resize,m_mfit,h_200,w_200'
          }
          className={style.photo}
          size="large"
          shape="circle"
        />
        <Tag icon={<GithubOutlined />} color="#55acee" style={{ marginLeft: '10px' }}>
          {localStorage.getItem('username')}
        </Tag>
      </div>
      <Count />
    </div>
  );
  const goToDetail = (id: number, user_id: string) => {
    history.push(`/client/detail/${id}`, { id, user_id });
  };
  return (
    <div className={style.article_con}>
      {acticles.map((item, index) => (
        <div
          className={style.card}
          onClick={() => {
            goToDetail(item.id, item.user_id);
          }}
        >
          <div className={style.top}>
            <Popover content={userContent} title="详细信息">
              <Link to={''} style={{ color: '#707070' }}>
                {item?.username}
              </Link>
            </Popover>
            {` | ${item.createdAt.split(' ')[0]} | ${item.type}`}
          </div>

          <div className={style.middle}>
            <div className={style.title}> {item.title}</div>
            <div>{item.desc.slice(0, 40)}</div>
          </div>

          <div className={style.bottom}>
            <ArticleCount id={item.id} />
            {/* <div className={style.icon}>
              <IconFont type="iconpinglun" style={{ fontSize: '15px' }} />
              1234
            </div> */}
          </div>
        </div>
      ))}
    </div>
  );
};

export default Article;
